今天，我們要施展的是系統開發中最實用的一式：「庫存查詢系統」。

一個能讓管理者快速掌握所有商品庫存狀況的介面，是POS系統不可或缺的核心功能。

我們將打造一個功能完整、介面美觀的庫存查詢頁面，讓管理者能對商品庫存一目了然。

今日目標

1. 建立功能完整的庫存查詢系統
2. 設計美觀的商品卡片展示介面
3. 實現即時搜尋、分類篩選、排序功能
4. 加入庫存警告機制，提升管理效率

系統架構設計

功能需求分析

我們的庫存查詢系統需要具備以下核心功能：

• 即時搜尋：支援商品名稱、編號、分類的模糊搜尋
• 分類篩選：按商品分類快速篩選
• 多維度排序：支援按名稱、庫存、價格、分類排序
• 庫存警告：自動標示低庫存商品
• 響應式設計：適配各種裝置尺寸

資料結構設計

const product = {
  id: 'F001', // 商品編號
  name: '北歐風三人沙發', // 商品名稱
  stock: 8, // 庫存數量
  price: 25000, // 售價
  category: '沙發', // 商品分類
  imageUrl: '...', // 商品圖片
};

核心功能實作

1. 響應式搜尋系統

// 計算屬性：篩選後的商品
const filteredProducts = computed(() => {
  let filtered = products.value;

  // 搜尋篩選
  if (searchQuery.value.trim()) {
    const query = searchQuery.value.toLowerCase();
    filtered = filtered.filter(
      (product) =>
        product.name.toLowerCase().includes(query) ||
        product.id.toLowerCase().includes(query) ||
        product.category.toLowerCase().includes(query),
    );
  }

  // 分類篩選
  if (selectedCategory.value) {
    filtered = filtered.filter((product) => product.category === selectedCategory.value);
  }

  // 排序
  filtered.sort((a, b) => {
    switch (sortBy.value) {
      case 'name':
        return a.name.localeCompare(b.name);
      case 'stock':
        return b.stock - a.stock;
      case 'price':
        return b.price - a.price;
      case 'category':
        return a.category.localeCompare(b.category);
      default:
        return 0;
    }
  });

  return filtered;
});

• 使用 computed 屬性實現響應式篩選
• 支援多欄位模糊搜尋
• 即時更新，無需手動觸發

2. 庫存警告機制

// 庫存等級判斷
const getStockLevelClass = (stock) => {
  if (stock < 10) return 'critical'; // 緊急
  if (stock < 20) return 'low'; // 不足
  if (stock < 50) return 'medium'; // 正常
  return 'high'; // 充足
};

// 低庫存商品統計
const lowStockCount = computed(() => {
  return filteredProducts.value.filter((product) => product.stock < 20).length;
});

• 視覺化庫存狀態，一目了然
• 自動統計低庫存商品數量
• 分級警告系統，提升管理效率

3. 商品卡片設計

<div class="product-card" :class="{ 'low-stock': product.stock < 20 }">
  <div class="product-image">
    <div class="stock-badge" :class="getStockLevelClass(product.stock)">
      {{ getStockLevelText(product.stock) }}
    </div>
  </div>

  <div class="product-info">
    <h3 class="product-name">{{ product.name }}</h3>
    <p class="product-id">編號: {{ product.id }}</p>
    <p class="product-category">{{ product.category }}</p>

    <div class="product-details">
      <div class="price-info">
        <span class="price-label">售價</span>
        <span class="price">NT$ {{ product.price.toLocaleString() }}</span>
      </div>
      <div class="stock-info">
        <span class="stock-label">庫存</span>
        <span class="stock-count" :class="getStockLevelClass(product.stock)">
          {{ product.stock }} 件
        </span>
      </div>
    </div>
  </div>
</div>

庫存狀態視覺化

/* 庫存等級樣式 */
.stock-badge.critical {
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
}

.stock-badge.low {
  background: linear-gradient(135deg, #feca57, #ff9ff3);
}

.stock-badge.medium {
  background: linear-gradient(135deg, #48dbfb, #0abde3);
}

.stock-badge.high {
  background: linear-gradient(135deg, #1dd1a1, #55a3ff);
}

模擬資料設計

15種不同類型的家具商品，涵蓋：

• 沙發類：北歐風三人沙發、單人沙發椅、L型轉角沙發
• 桌椅類：實木餐桌椅組、人體工學辦公椅、吧台椅、書桌
• 收納類：現代簡約書櫃、衣櫃三門式、電視櫃、鞋櫃、梳妝台
• 床具類：雙人床架、床頭櫃
• 茶几類：大理石茶几

1. Vue 3 Composition API 最佳實踐

// 使用 ref 管理響應式狀態
const searchQuery = ref('');
const selectedCategory = ref('');
const sortBy = ref('name');

// 使用 computed 實現派生狀態
const filteredProducts = computed(() => {
  // 複雜的篩選邏輯
});

2. 效能優化策略

• 計算屬性快取：只有依賴項變化時才重新計算
• 事件防抖：搜尋輸入使用 @keyup.enter 避免過度觸發
• 條件渲染：使用 v-if 避免不必要的DOM操作

3. 使用者體驗設計

• 即時回饋：搜尋結果即時更新
• 視覺層次：清晰的資訊架構
• 互動效果：hover動畫提升操作感受
• 無障礙設計：語義化HTML結構

完成後的庫存查詢系統具備：

✅ 完整的搜尋功能 - 支援多欄位模糊搜尋
✅ 智能分類篩選 - 動態生成分類選項
✅ 多維度排序 - 四種排序方式
✅ 庫存警告系統 - 自動標示低庫存商品

結論

今天，我們成功打造了一個功能完整的庫存查詢系統。這個系統不僅展示了Vue 3的強大功能，更體現了現代前端開發的最佳實踐。

明日，Day 25：[Systemの呼吸・貳之型] 客戶資料管理（上）：介面結構、搜尋與雙視圖設計。心を燃やせ 🔥！